import {Form, Modal, Row, Col, Input, Select, InputNumber} from 'antd';
import {useEffect} from 'react';
import {connect} from 'umi';

const DataForm = (props) => {
  const {dispatch, submitting} = props;
  const {rechargeForm, setRechargeForm, tablePayload, setTablePayload} = props.data;
  const [form] = Form.useForm();

  /* 初始化表单数据 */
  useEffect(() => {
    if (rechargeForm && rechargeForm.data) {
      form.setFieldsValue({
        userId: rechargeForm.data.id
      });
    }
  }, [rechargeForm, form]);

  /* 确定操作 */
  function onOk() {
    form.validateFields().then(values => {
      if (submitting) {
        return;
      }
      let keys = Object.keys(values);
      keys.forEach(d => {
        values[d] = values[d] === null ? undefined : values[d];
      });
      dispatch({
        type: 'PVipUser/recharge',
        payload: values,
        callback: () => {
          onCancel();
          setTablePayload({...tablePayload});
        },
      });
    });
  }

  /* 取消操作 */
  function onCancel() {
    setRechargeForm(undefined);
    form.resetFields();
  }

  return (
    <Modal
      confirmLoading={submitting}
      title={rechargeForm ? rechargeForm.title : ''}
      open={rechargeForm ? rechargeForm.visible : false}
      onOk={onOk}
      onCancel={onCancel}
      forceRender={true}
      width={600}
      bodyStyle={{paddingTop: 24}}
    >
      <Form layout='horizontal' labelCol={{span: 5}} form={form}>
        {rechargeForm && rechargeForm.data && (
          <Form.Item name='userId' hidden={true}>
            <Input/>
          </Form.Item>
        )}
        <Row gutter={16}>
          <Col span={24}>
            <Form.Item
              name='' label='手机号码'>
              <span style={{color: 'red'}}>{rechargeForm?.data?.mobile}</span>
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={16}>
          <Col span={24}>
            <Form.Item
              name='' label='当前余额'>
              <span style={{color: 'green'}}>{(rechargeForm?.data?.balanceAmount / 100).toFixed(2)}</span>
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={16}>
          <Col span={24}>
            <Form.Item
              name='flag' label='充值类型'
              rules={[
                {required: true, message: '充值类型不能为空'},
              ]}
            >
              <Select placeholder='请选择充值类型'>
                <Select.Option value={0}>加余额</Select.Option>
                <Select.Option value={1}>减余额</Select.Option>
              </Select>
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={16}>
          <Col span={24}>
            <Form.Item
              name='amount' label='变动金额'
              rules={[
                {required: true, message: '变动金额不能为空'},
              ]}>
              <InputNumber style={{width: '100%'}} step={0.01} placeholder='请输入变动金额'/>
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={16}>
          <Col span={24}>
            <Form.Item
              name='remark' label='备注信息'
              rules={[
                {required: true, message: '备注信息不能为空'},
              ]}>
              <Input.TextArea placeholder='请输入备注信息'/>
            </Form.Item>
          </Col>
        </Row>
      </Form>
    </Modal>
  );
};


export default connect(({loading}) => {
  return {
    submitting: loading.effects['PVipUser/recharge'],
  };
})(DataForm);

